import React, { Component } from 'react';

import { HeaderBox } from './style'

class Header extends Component {
    state = {
        active: ["active", ""],
        sliderArr: ["slider", "slider right"],
        sliderIndex: 0
    }
    changeNav(index) {
        const active = this.state.active.map(item => "");
        active[index] = "active";
        this.setState({
            active,
            sliderIndex: index
        })
        // 修改当前的切换数据源
        this.props.setListDataIndex(index)
    }
    render() {
        return (
            <HeaderBox>
                <ul>
                    <li onClick={() => { this.changeNav(0) }} className={this.state.active[0]}>分类</li>
                    <li onClick={() => { this.changeNav(1) }} className={this.state.active[1]}>食材</li>
                    <li className={this.state.sliderArr[this.state.sliderIndex]}></li>
                </ul>
            </HeaderBox>
        );
    }
}

export default Header;
